<div class="card" id="ruls">
    <div class="card-header">
     添加规则
    </div>
    <div class="card-body">
        <div class="form-group">
            <label for="">规则名称</label>
            <input type="text" v-model="rule.name" class="form-control" name="name" id="" aria-describedby="helpId" placeholder="">
        </div>
        <div class="form-group">
            <label for="">关键词</label>
            <button type="button"  class="btn btn-info btn-sm ml-3" @click="addKey()">添加关键词</button>
        </div>
        <div class="input-group mb-3" v-for="(v,k) in rule.keywords">
            <input type="text" v-model="v.keyword" class="form-control danger" placeholder="关键词" aria-label="Recipient's username" aria-describedby="basic-addon2">
            <div class="input-group-append">
                <button @click="delKey(k)" class="btn btn-outline-secondary" type="button">删除</button>
            </div>
        </div>
        <textarea name="rule" id="" cols="30" rows="10">@{{rule}}</textarea>
    </div>
</div>
@push('js')
    <script>
        require(['hdjs','vue','jquery'],function (hdjs,Vue,$) {
            new Vue({
                el:'#ruls',
                data:{
                   rule:{!! json_encode($oldRul,true) !!},
                },
                methods:{
                    addKey(){
                        // console.log(this.rule);
                var item={'keyword':''};
                    this.rule.keywords.push(item);
                    },
                    delKey(k){
                        this.rule.splice(k,1);
                    }
                },
            });
        });
    </script>
@endpush